/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: 沈小白 2020-07-22 $
 */<template> 
	<view>
		<view class="logistics_mesg">
			<view class="logistics-wrap" v-if='activeList'>
				<view @tap="clearMessage" class="logistics-empty">清空</view>
				<block v-for="(item,index) in activeList" :key="index">
					<view class="logistics_items" @tap="goDetail" :data-idx="index">
						<view class="mesg_time">
							<text>
								{{item.send_time}}
							</text>
						</view>
						<view class="mesg_cont">
							<view class="mesg_tit">
								{{item.message_title}}
								<text class="logistics_icon" v-if="item.is_see==0"></text>
							</view>
							<view class="activemesg_img">
								<image :src="item.img_uri"role="img"></image>
							</view>
							<view @tap="goDetail" class="mesg_link" :data-idx="index">
								<text>
									查看详情
								</text>
								<image :src="imgUrl+'common/icon-arrowdown.png'" role="img"></image>
							</view>
						</view>
					</view>
				</block>
			</view>
			<!-- 活动空 -->
			<view v-if="!activeList||activeList.length==0">
				<no-data  ></no-data>
			</view>
		</view>
	</view>
</template>

<script>
	import NoData from "@/components/nodata/nodata.vue";
	import config from "@/api/config.js";
	import common from "@/common/common.js";
	import {mapState} from 'vuex';
	import {
		getMessageActivity,
		putMessageSee,
		delMessage
	} from "@/api/api.js";
	export default {
		data() {
			return {
				imgUrl:config.imgUrl,
				activeList: [],
				params: {
					p: 1,
				},
				total: '',
			};
		},
		components: {
			NoData
		},
		onLoad() {
			
		},
		computed: {
			...mapState(['hasLogin'])
		},
		onShow(){
			if(this.hasLogin){
				this.getMessageActivity(this.params)
			}else{
				common.toast("none","请登录",2000)
				
			}
		},
		methods: {
			/*活动分页*/ 
			getMessageActivity(params) {
				getMessageActivity(params).then(res => {
					console.log(res)
					res.records.forEach((i,index)=>{
						let timer=common.format(i.send_time,"yyyy-MM-dd hh:mm:ss")
						i.send_time=timer;
						if(i.start_time>0){ //start_time=0  没有开始时间 
							let start_time_text=common.format(i.start_time,"yyyy-MM-dd hh:mm:ss")
							i.start_time_text=start_time_text
						}
						if(i.img_uri.indexOf("public")==1){ //判断头像 是否有 域名
							var hostUrl=config.host;//路径前缀
							i.img_uri= hostUrl+i.img_uri;//路径前缀
						}
					})
					this.activeList =this.activeList.concat(res.records);
					this.total = res.total;
				})
			},
			/*消息已读*/
			putMessageSee(rec_id){
				putMessageSee(rec_id).then(res=>{
					console.log(res)
					if(res.status==1){
						this.params.p=1;
						this.getMessageActivity(this.params)
					}
				})
			},
			/*清空消息*/
			delMessage(params){
				delMessage(params).then(res=>{
					console.log(res)
					if(res.status==1){
						this.params.p=1;
						this.getMessageActivity(this.params)
					}
				})
			},
			/*清空*/
			clearMessage(){
				let params={ // category  0通知消息,1活动消息,2物流,3私信
					category:1
				}
				var that = this;
				uni.showModal({
					title: '确定清空全部消息！',
					cancelText: '取消',
					confirmText: '确定',
					success: function (res) {
						if (!res.confirm) {
							return;
						}
						that.delMessage(params)
					}
				});
			},
			/*查看详情*/
			goDetail(e){
				console.log(e)
				var idx = e.currentTarget.dataset.idx;
				var item=this.activeList[idx];
				
				if(item.is_finish!=1){
					common.toast("none","活动已结束",3000)
					var that=this;
					setTimeout(function(){
						that.putMessageSee(item.rec_id);
					},3000)
					return;
				};
				var currentTime=Date.parse(new Date())/1000; //当前时间
				console.log(currentTime)
				if(item.start_time>currentTime){
					common.toast("none",`活动开始时间+${item.start_time_text}`,3000)
					this.putMessageSee(item.rec_id);
					return;
				};
				this.putMessageSee(item.rec_id);
				if(item.prom_type==1){//抢购
					if (item.goods_id==0){  //表示列表（多个商品）
						uni.navigateTo({ url: '/pages/activity/seckill_list/seckill_list' });
					} else {  //表示单个商品
						 uni.navigateTo({ url: '/pages/goods/goodsInfo/goodsInfo?goods_id=' + item.goods_id  });
					}
				}
				if(item.prom_type==2){ //团购
					console.log(11)
					uni.navigateTo({ url: '/pages/user/msg_info/msg_info?rec_id=' + item.rec_id});
					if (item.goods_id==0){  //表示列表（多个商品）
						uni.navigateTo({ url: '/pages/activity/group_list/group_list' });
					} else {  //表示单个商品
						uni.navigateTo({ url: '/pages/goods/goodsInfo/goodsInfo?goods_id=' + item.goods_id  });
					}
				}
				if(item.prom_type==3){//商品优惠
					if (item.goods_id==0){  //表示列表（多个商品）
						uni.navigateTo({ url: '/pages/activity/sales_list/sales_list' });
					} else {  //表示单个商品
						 uni.navigateTo({ url: '/pages/goods/goodsInfo/goodsInfo?goods_id=' + item.goods_id  });
					}
				}
				if(item.prom_type==4){//预售
					uni.navigateTo({ url: '/pages/activity/group_list/group_list' });
				}
				if(item.prom_type==5){//虚拟
					if (item.goods_id!=0){
						uni.navigateTo({ url: '/pages/goods/goodsInfo/goodsInfo?goods_id=' + item.goods_id  });
					}
				}
				if(item.prom_type==6){//拼团
					if (item.goods_id==0){  //表示列表（多个商品）
						uni.navigateTo({ url: '/pages/team/index/index' });
					} else {  //表示单个商品
						uni.navigateTo({url: '/pages/team/team_info/team_info?goods_id=' + item.goods_id +'&team_id=' + item.prom_id})
					}
				}
				if(item.prom_type==7){//搭配购
					common.toast("none","暂无搭配购",3000)
				}
				if(item.prom_type==8){//自定义图文消息
					uni.navigateTo({ url: '/pages/goods/goodsInfo/goodsInfo?goods_id=' + item.goods_id  });
				}
				if(item.prom_type==9){//订单促销
					uni.navigateTo({ url: '/pages/user/msg_info/msg_info?rec_id=' + item.rec_id});
				}	
					
			
			},
			onReachBottom(){//下拉加载数据
				if(this.activeList.length===this.total){
					common.toast("none","加载完了",2000)
					 return false;
				}
				this.params.p++;
				if(this.hasLogin){
					this.getMessageActivity(this.params)
				}
				
				
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}

	.logistics_mesg {
		width: 100%;
		height: auto;
		padding-bottom: 60rpx;
	}

	.logistics_items {
		width: 92%;
		padding: 0 4%;
	}

	.logistics_items .mesg_time {
		line-height: 66rpx;
		padding-top: 18rpx;
		font-size: 24rpx;
		color: #666;
		text-align: center;
	}

	.mesg_cont {
		width: 94%;
		background-color: #fff;
		border: 1px solid #f3f3f3;
		border-radius: 10rpx;
		padding: 30rpx 3% 0;
		text-align: left;
	}

	.mesg_cont .mesg_tit {
		font-size: 30rpx;
		color: #333;
		position: relative;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		padding-right: 30px;
		margin-bottom: 15rpx;
	}

	.mesg_cont .mesg_tit text {
		width: 18rpx;
		height: 18rpx;
		background-color: #ff3b3b;
		border-radius: 50%;
		position: absolute;
		right: 6rpx;
		top: 6rpx;
	}

	.mesg_cont .activemesg_img {
		width: 100%;
		height: 280rpx;
		position: relative;
		padding-top: 24rpx;
		text-align: center;
	}

	.mesg_cont .activemesg_img image {
		width: 100%;
		height: 100%;
		vertical-align: middle;
	}

	.mesg_cont .mesg_desc {
		font-size: 24rpx;
		color: #333;
		line-height: 36rpx;
		padding: 18rpx 6rpx 0;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.mesg_cont .mesg_link {
		display: block;
		width: 100%;
		height: 66rpx;
		line-height: 66rpx;
		padding-top: 24rpx;
		border-top: 1px solid #f3f3f3;
	}

	.mesg_cont .mesg_link text {
		float: left;
		color: #999;
		font-size: 24rpx;
	}

	.mesg_cont .mesg_link image {
		float: right;
		width: 25rpx;
		height: 30rpx;
		margin-top: 18rpx;
	}

	.mesg_cont .activemesg_img text {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.6);
		position: absolute;
		left: 0;
		top: 0;
		z-index: 9;
		line-height: 280rpx;
		font-size: 36rpx;
		color: #fff;
		font-weight: bold;
		letter-spacing: 6rpx;
		margin-top: 0；
	}

	.logistics-wrap {
		position: relative
	}

	.logistics-empty {
		position: absolute;
		color: #666666;
		font-size: 24rpx;
		right: 30rpx;
		top: 25rpx;
		line-height: 26rpx;
		border: 1rpx solid #f3f3f3;
		border-radius: 10rpx;
		padding: 6rpx;

	}
</style>
